<template>
  <view class="container">
    <!-- 背景 -->
    <view class="background">
      <view class="bg-gradient"></view>
      <view class="bg-blur-1"></view>
      <view class="bg-blur-2"></view>
    </view>

    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="time">9:41</view>
      <view class="right-icons">
        <view class="signal"></view>
        <view class="wifi"></view>
        <view class="battery"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="handleBack">
        <uni-icons type="left" size="24" color="#000000"></uni-icons>
      </view>

      <!-- 标题区域 -->
      <view class="title-box">
        <view class="logo">
          <uni-icons type="home" size="32" color="#FFFFFF"></uni-icons>
        </view>
        <view class="title">欢迎登录 天顺路桥</view>
      </view>

      <!-- 账号输入框 -->
      <view class="input-box">
        <view class="label">账号</view>
        <view class="input-wrapper">
          <uni-easyinput
            v-model="account"
            placeholder="请输入账号"
            :focus="isFocused"
            @focus="handleInputFocus"
            @blur="handleInputBlur"
            :clearable="true"
            @clear="clearAccount"
            class="custom-input"
          />
        </view>
        <view class="line" :class="{ active: isFocused }"></view>
      </view>

      <!-- 下一步按钮 -->
      <view class="next-btn" :class="{ active: account.length > 0 }" @click="handleNext">
        <uni-icons type="right" size="20" color="#FFFFFF" style="margin-right: 10rpx;"></uni-icons>
        <text>下一步</text>
      </view>
    </view>

    <!-- 底部指示器 -->
    <view class="home-indicator"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      isFocused: false
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    handleNext() {
      if (!this.account) {
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        })
        return
      }
      // 跳转到密码登录页面
      uni.navigateTo({
        url: '/pages/login/password?account=' + this.account
      })
    },
    handleInputFocus() {
      this.isFocused = true
      // 可以在这里添加其他焦点获得时的处理逻辑
      console.log('输入框获得焦点')
    },
    handleInputBlur() {
      this.isFocused = false
      // 可以在这里添加其他焦点失去时的处理逻辑
      console.log('输入框失去焦点')
    },
    clearAccount() {
      this.account = ''
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #F2F4FA;
}

.background {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
}

.bg-gradient {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
  background: linear-gradient(180deg, #F2F4FA -3%, #F9FCFB 100%);
}

.bg-blur-1 {
  position: absolute;
  width: 642rpx;
  height: 642rpx;
  left: -236rpx;
  top: -150rpx;
  background: rgba(156, 210, 255, 0.18);
  filter: blur(217.46rpx);
  border-radius: 50%;
}

.bg-blur-2 {
  position: absolute;
  width: 554rpx;
  height: 554rpx;
  left: 376rpx;
  top: -140rpx;
  background: linear-gradient(134deg, rgba(193, 165, 250, 0.18) 15%, rgba(156, 210, 255, 0.09) 37%, rgba(156, 210, 255, 0.18) 77%);
  filter: blur(81.54rpx);
  border-radius: 50%;
}

.status-bar {
  height: 88rpx;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
}

.time {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 600;
  color: #010101;
}

.right-icons {
  flex-direction: row;
  align-items: center;
}

.signal {
  width: 36rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.wifi {
  width: 34rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.battery {
  width: 55rpx;
  height: 26rpx;
}

.content {
  position: relative;
  flex: 1;
  padding: 0 32rpx;
  align-items: center;
}

.back-btn {
  width: 48rpx;
  height: 48rpx;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-box {
  flex-direction: row;
  align-items: center;
  margin-bottom: 128rpx;
  margin-top: 100rpx;
  margin-left: 32rpx;
  align-self: flex-start;
}

.logo {
  width: 64rpx;
  height: 64rpx;
  background-color: #4980FF;
  border-radius: 12rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 56rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.input-box {
  margin-bottom: 120rpx;
  width: 622rpx;
}

.label {
  font-size: 40rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 20rpx;
}

.input-wrapper {
  flex-direction: row;
  align-items: center;
  position: relative;
}

.custom-input {
  flex: 1;
}

.custom-input :deep(.uni-easyinput__content) {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.custom-input :deep(.uni-easyinput__content-input) {
  font-size: 32rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  color: rgba(0, 0, 0, 0.45);
  height: 80rpx;
  background-color: transparent !important;
}

.custom-input :deep(.uni-easyinput__content-input:not(:placeholder-shown)) {
  color: rgba(0, 0, 0, 0.85);
}

.line {
  height: 2rpx;
  background-color: #C9CDD4;
}

.line.active {
  background-color: #4980FF;
}

.next-btn {
  width: 622rpx;
  height: 90rpx;
  background-color: #C9CDD4;
  border-radius: 94rpx;
  justify-content: center;
  align-items: center;
  display: flex;
}

.next-btn.active {
  background-color: #4980FF;
}

.next-btn text {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: #FFFFFF;
}

.home-indicator {
  width: 134rpx;
  height: 5rpx;
  background-color: #000000;
  border-radius: 100rpx;
  margin: 0 auto 20rpx;
}
</style>